<template>
  <BaseTable
    ref="baseTableRef"
    :apiUrl="getIpReservedList"
    :columns="ipReserved"
    placeholder="请输入IP地址"
    isRowSelection
    :rowId="id"
    :isShowAddBtn="false"
    @handleSelectionChange="(val) => (selectedKeys = val)"
  >
    <template #operatBtns>
      <ga-button
        type="primary"
        @click="$refs.addOrEditRef.open()"
        style="margin-right: 8px"
        >创建</ga-button
      >
      <ga-button
        status="danger"
        :disabled="isdisable"
        @click="handleDelete(selectedKeys)"
      >
        批量删除
      </ga-button>
    </template>
    <template #action="{ record }">
      <ga-link status="danger" @click="handleDelete([record])">删除</ga-link>
    </template>
  </BaseTable>
  <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
</template>

<script setup>
import { ref, computed } from "vue";
import { ipReserved } from "../../columns";
import { getIpReservedList, deleteIp } from "@/api/layer2subnet";
import addOrEdit from "./addOrEdit.vue";
import { useRoute } from "vue-router";
import { warningModal } from "@/hooks/useWarningModal";
import { Message } from "@garco-design/web-vue";

const route = useRoute();
const { id } = route.params;
const selectedKeys = ref([]);
const isdisable = computed(() => selectedKeys.value?.length === 0);
// 删除方法
const baseTableRef = ref(null);
const handleDelete = async (records) => {
  const ids = records.map((item) => item.id || item);
  warningModal(`确定要删除数据吗`, async () => {
    try {
      await deleteIp(id, "reserved", ids);
      Message.success("操作成功");
      baseTableRef.value.fetchData();
    } catch (err) {
      console.log(err);
    }
  });
};
</script>

<style lang="scss" scoped></style>
